<template>
 <div class="goods">
    <transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    >
        <div class="ball" v-show="flag" ref="ball"></div> 
    </transition>
    <div class="mui-card-header">
         <slider :info="info"></slider>
     </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <h4>{{info.title}}</h4>
                <hr/>
                <p>
                    市场价：<span class="old">￥{{info.old}}</span>
                    销售价：<span class="new">￥{{info.new}}</span>
                </p>
                <p>购买数量：<chocieNum class="num-box"></chocieNum></p>
                <mt-button type="primary">立即购买</mt-button>
                <mt-button type="danger" @click="addCar">加入购物车</mt-button>
            </div>
        </div>
     <div class="mui-card-footer">
         <h4>商品参数</h4>
         <hr>
         <P>商品编号：{{details.num}}</P>
         <P>库存情况：{{details.stock}}</P>
         <P>上架时间：{{details.time}}</P>
         <mt-button plain size="large" type="primary" class="imginfo" @click="introduce">图文介绍</mt-button>
         <mt-button plain size="large" type="danger" class="goodsComment" @click="goCom">商品评论</mt-button>
     </div>
 </div>
</template>

<script>
import slider from "../slider/slider.vue"
import chocieNum from "./choiceNum.vue"
export default {
    data(){
        return{
            info:[],
            details:[],
            flag:false,
        }
    },
   
    components:{
        slider,
        chocieNum
    },
    mounted(){
       mui(".num-box").numbox()
   },
    methods:{
    getdata(){
        this.$http.get("http://goodsinfo.com").then(result=>{
            result.body.some(item=>{
                if(item.id == this.$route.params.id){
                    this.info = item
                    this.details=this.info.info[0];
                    console.log(this.info)
                     return true
                }
            })
        })
    },
    addCar(){
        this.flag = true;
        var info={
            id:this.$route.params.id,
            title:this.details.title,
            price:this.info.new,
            count:this.$store.state.n,
            onOff:true
        }
        this.$store.commit("saveGoods",info)
        },
    introduce(){
        this.$router.push("/introduce")
    },
    goCom(){
        this.$router.push("/goodsCom")
    },
    beforeEnter(el){
        el.style.transform="translate(0,0)"
        },
    enter(el,done){
        el.offsetWidth;
        el.style.transition="all 0.5s";
        var ico=document.getElementById("ico");
        var t1=ico.getBoundingClientRect().top;
        var l1=ico.getBoundingClientRect().left;
        var t2=this.$refs.ball.getBoundingClientRect().top;
        var l2=this.$refs.ball.getBoundingClientRect().left;
        var x=l1-l2;
        var y= t1-t2;
        el.style.transform="translate("+x+"px,"+y+"px)"
         done()
        },
     afterEnter(el){
        this.flag = false
        }
    },
    created() {
        this.getdata()
   
    }
}
</script>

<style scoped>
 
   .goods{
       background: #eee;
       padding: 10px;
       position: relative;
   }
   .mui-card-header,.mui-card-content,.mui-card-footer{
       background: #fff;
       margin-top:10px;
       box-shadow: 0 0 2px 2px #e4e2e2
   }
   .old{
       text-decoration: line-through;
       font-size: 13px
   }
   .new{
       color: red
   }
   .mui-numbox{
     height: 30px;
   }
   .mint-button{
       line-height: 35px;
       height: 35px;
       font-size: 16px
   }
   .mui-card-footer{
       display: block
   }
   .imginfo{
       margin-bottom: 10px
   }
   .goodsComment,.imginfo{
       padding: 0
   }
   .ball{
       position: absolute;
       left: 165px;
       top:420px;
       width: 10px;
       height: 10px;
       background: red;
       border-radius: 50%;
       z-index: 99;
   }
 .mui-card-header[data-v-48371769]{
     margin-top:0
 }
</style>